<template>
	<div class="app">
		<h2>{{ message }}</h2>
		<button @click="changeMessage">改变message</button>

		<show-info :message="message" @infoBtnClick="infoBtnClick" ref="showInfoRef"></show-info>
	</div>
</template>

<script setup>
	// 所有编写在顶层中的代码, 都是还是默认暴露给template可以直接使用的
	import { onMounted, ref } from 'vue'
	import ShowInfo from './view/ShowInfo.vue'
	// 组件直接引用使用, 且每次使用都会有一个独立的setup作用域
	import Home from './view/Home.vue'

	const message = ref('message')

	function changeMessage() {
		message.value = 'abc'
	}

	function infoBtnClick(payload) {
		console.log('payload: ', payload)
	}

	// 获取组件实例
	const showInfoRef = ref(null)
	onMounted(() => {
		showInfoRef.value.foo()
	})
</script>

<style scoped></style>
